<% content_for :heading do %>
  <%= t(".title") %>
<% end %>

<% content_for :description do %>
  <p><%= t(".description_layout_p1") %></p>

  <p><%= t(".description_layout_p2") %></p>

  <ul class="list-disc pl-4">
    <li><%= t(".layout_list_1") %></li>
    <li><%= t(".layout_list_2") %></li>
    <li><%= t(".layout_list_3") %></li>
  </ul>
<% end %>

<% content_for :toc do %>
  <a href="#desktop"><%= t(".desktop") %></a>
  <a href="#tablet"><%= t(".tablet") %></a>
  <a href="#mobile"><%= t(".mobile") %></a>
  <a href="#code"><%= t(".code") %></a>
  <a href="#breakpoints"><%= t(".breakpoints") %></a>
<% end %>

<section id="desktop" class="design__section">
  <h2><%= t(".desktop") %> <span class="label">lg</span></h2>

  <p><%= t(".section_p_desktop") %></p>

  <div class="grid grid-cols-12 gap-4">
    <% 12.times do %>
      <div class="bg-primary/10 text-center h-10"></div>
    <% end %>
  </div>
</section>

<section id="tablet" class="design__section">
  <h2><%= t(".tablet") %><span class="label">md</span></h2>

  <p><%= t(".section_p_tablet") %></p>

  <div class="grid grid-cols-6 gap-4">
    <% 6.times do %>
      <div class="bg-primary/10 text-center h-10"></div>
    <% end %>
  </div>
</section>

<section id="mobile" class="design__section">
  <h2><%= t(".mobile") %> <span class="label">sm</span></h2>

  <p><%= t(".section_p_mobile") %></p>

  <div class="grid grid-cols-4 gap-4">
    <% 4.times do %>
      <div class="bg-primary/10 text-center h-10"></div>
    <% end %>
  </div>
</section>

<section id="code" class="design__section">
  <h2><%= t(".code") %></h2>

  <p><%= t(".section_p_code") %></p>

  <% link_section_url = "https://github.com/decidim/decidim/tree/develop/decidim-core/app/views/layouts/decidim/shared" %>
  <p><%= t(".section_p_code_html", link_section_code: link_to(link_section_url, link_section_url, target: "_blank", rel: "noopener noreferrer", class: "text-secondary underline")) %></p>

  <h3 class="text-xl"><%= t(".full_width") %></h3>

  <p><%= t(".not_required") %></p>

  <h3 class="text-xl"><%= t(".left_aside") %></h3>

  <code class="p-4 rounded block bg-background">
    &lt;%= render layout: "layouts/decidim/shared/layout_two_col" do %&gt;
      ...
    &lt;% end %&gt;
  </code>

  <h3 class="text-xl"><%= t(".right_aside") %></h3>

  <code class="p-4 rounded block bg-background">
    &lt;%= render layout: "layouts/decidim/shared/layout_two_col", locals: { reverse: true } do %&gt;
      ...
    &lt;% end %&gt;
  </code>

  <h3 class="text-xl"><%= t(".centered") %></h3>

  <code class="p-4 rounded block bg-background">
    &lt;%= render layout: "layouts/decidim/shared/layout_center", locals: { columns: 10 } do %&gt;
      ...
    &lt;% end %&gt;
  </code>

  <p><%= t(".columns") %></p>

</section>

<section id="breakpoints" class="design__section">
  <h2><%= t(".breakpoints") %></h2>

  <p><%= t(".section_p_breakpoints") %></p>

  <table class="design__table">
    <thead>
      <th><%= t(".breakpoint") %></th>
      <th><%= t(".properties") %></th>
    </thead>
    <tbody>
      <%
        rows = []
        rows << { breakpoint: "sm (640px)", properties: "max-width: 640px;" }
        rows << { breakpoint: "md (768px)", properties: "max-width: 768px;" }
        rows << { breakpoint: "lg (1024px)", properties: "max-width: 1024px;" }
        rows << { breakpoint: "xl (1280px)", properties: "max-width: 1280px;" }
        rows << { breakpoint: "2xl (1536px)", properties: "max-width: 1536px;" }

        rows.each do |row|
      %>
        <tr>
          <td><%= row[:breakpoint] %></td>
          <td><%= row[:properties] %></td>
        </tr>
      <% end %>
    </tbody>
  </table>
</section>
